<!DOCTYPE html>
<html>
<head>
<title>Apple Diagnostic Board</title>

<!--css below-->

<!--bootstrap-->
<link rel= "stylesheet" type = "text/css" href = "css/bootstrap/bootstrap.min.css">
<!--buttons-->
<link rel ="stylesheet" type = "text/css" href = "css/bootstrap-button/buttons.css"/>
<!--table-->
<link rel ="stylesheet" type = "text/css" href = "css/bootstrap-table/bootstrap-table.css"/>
<!--myown-->
<link rel ="stylesheet" type = "text/css" href = "css/account-book.css"/> 
<!--flat-ui-->
<link rel= "stylesheet" type = "text/css" href = "css/flat-ui/flat-ui.css">

<!--javascript below-->

<!--jquery-->
<script type = "text/javascript" src = "js/jQuery/jquery.min.js"></script>
<script type = "text/javascript" src = "js/jQuery/jquery-1.12.0.js"></script>
<script type = "text/javascript" src = "js/jQuery/jquery.gesture.password.js"></script>

<!-- bootstrap -->
<script type = "text/javascript" src = "js/bootstrap-table/bootstrap-table.js"></script>
<script type = "text/javascript" src = "js/bootstrap/bootstrap.min.js"></script>

<!--disable edit and select-->
<script type = "text/javascript" src = "js/forbidden.js"></script>
<!--flat-ui-->
<script type = "text/javascript" src="js/flat-ui/flat-ui.min.js"></script>
<script type = "text/javascript" src="js/flat-ui/application.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 固定页面大小87%，禁止缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=0.87, user-scalable=no">  
</head>
<body>
	<style>
      body {
          padding-bottom: 20px;
          padding-top: 40px;
          margin-left:-10px;
      }
      .navbar {
         margin: 20px;
      }
    </style>
     
 <nav class="navbar navbar-inverse navbar-lg navbar-embossed" role="navigation" style="width: 1165px">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-8">
            <span class="sr-only"></span>
          </button>			
          <a class="navbar-brand" href="#" style="display: block; text-align: center;">OneZero : Apple Diagnostic Board</a>
          <ul class="nav navbar-nav" style="padding: 5px">
          </ul>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-8">
          <!--<ul class="nav navbar-nav" style="padding: 5px">
            <li class="active"><a href="#">Messages<span class="navbar-unread">1</span></a></li>
           </ul>-->
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="#"id="nowtime" style="color: white;padding: 15px;font-size: 30px;"></a></li>         	
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      	
	<table style="margin-left:25px;">
		<tr>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="one">1</button>
			</td>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="two">2</button>
			</td>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="three">3</button>
			</td>
			<!--border使td四边都带有边框，rowspan：一个td跨n行-->
			<!--vertical-align: top使td内容置顶，padding-top: 12px;离顶部间距20px;"border: solid #000 1px;-->
			<td style="style: width: 50%; vertical-align: top; padding-left: 0px;padding-top: 10px;padding-right: 24px;" rowspan="4" >             
				
		      <div class="pallete-item" id="pi-bf" style="width:610px;margin-bottom: 55px">
			      <dl class="palette palette-wet-asphalt" style="height: 70px" id="dl-bf-dt">
              		<dt>您的电话号码</dt>
            	  </dl>
             	  <dl class="palette palette-midnight-blue" style="height: 115px" id="dl-bf-span">
             	  	<!--tabindex使span获得焦点能力-->
              		<span tabindex="0" class="eat" id="bf"></span>
            	  </dl>
		      </div>
		      <!--换行p-->
				<p></p>
				<!-- 删除属性data-target=".bs-example-modal-lg"可以取消点击弹出模态框 -->
		       <div class="pallete-item" id="pi-lu" style="width:610px;margin-bottom: 55px" data-toggle="modal" >
			      <dl class="palette palette-wet-asphalt" style="height: 70px" id="dl-lu-dt">
              		<dt>需要诊断的设备</dt>
            	  </dl>
             	  <dl class="palette palette-midnight-blue" style="height: 115px" id="dl-lu-span">
              		 <span tabindex="0" class="eat" id="lu"></span>
            	  </dl>
		      </div>
		      <table>
				<tr>
					<td height="48">&nbsp;</td>
				</tr>
			  </table>
				<div style="text-align: center">
					<a href="#" id="checkNumber" class="button button-3d button-box button-rounded button-jumbo" style="width:500px;">当前等待信息</a>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				
			</td>
		</tr>
		<tr>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="four">4</button>
			</td>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="five">5</button>
			</td>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="six">6</button>
			</td>
		</tr>
		<tr>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="seven">7</button>
			</td>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="eight">8</button>
			</td>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="nine">9</button>
			</td>
		</tr>
		<tr>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="zero">0</button>
			</td>
			<td class="class_btn">
				<button class="button button-3d button-box button-giant" id="backspace"><<</button>
			</td>
			<td class="class_btn">
				<button class="button button-3d button-box button-primary button-giant" id="commit">提交</button>
			</td>
		</tr>
	</table>
	
	<!-- 模态框，选择设备 -->
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="myModal">
  		<div class="modal-dialog modal-lg">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        			<h4 class="modal-title">请选择需要诊断的设备</h4>
      			</div>
      		<div class="modal-body">
        		<div class="list-group">
				  <a href="#" class="list-group-item" id="ipad">iPad</a>
				  <a href="#" class="list-group-item" id="macbook">MacBook</a>
				  <a href="#" class="list-group-item" id="imac">iMac</a>
				  <a href="#" class="list-group-item" id="macpro">MacPro</a>
				  <a href="#" class="list-group-item" id="ipod">iPod</a>
				  <a href="#" class="list-group-item" id="others">Apple 配件</a>
				</div>
      		</div>
      		<div class="modal-footer">
        		<!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> -->
        		<a href="#" id="closeModel" class="button button-primary button-rounded button-large btn-default" data-dismiss="modal">关闭</a>
        		&nbsp;&nbsp;&nbsp;&nbsp;
        		<a href="#" id="saveDevice" class="button button-primary button-rounded button-large" data-dismiss="modal">保存</a>
      		</div>
    	</div>
  		</div>
	</div>
	
	<!-- 模态框，排队明细 -->
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="myListModal">
  		<div class="modal-dialog modal-lg">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        			<h4 class="modal-title">当前等待信息</h4>
      			</div>
      		<div class="modal-body">
        		<div class="list-group">
				<table data-toggle="table" data-height="246" data-sort-name="Item ID" data-sort-order=asc>
				    <thead>
				        <tr>
				            <th>Item ID</th>
				            <th>Item Name</th>
				            <th>Item Price</th>
				        </tr>
				    </thead>
				    <tbody>
				        <tr>
				            <td>1</td>
				            <td>Item 1</td>
				            <td>$1</td>
				        </tr>
				        <tr>
				            <td>2</td>
				            <td>Item 2</td>
				            <td>$2</td>
				        </tr>
				    </tbody>
				</table>
				</div>
      		</div>
      		<div class="modal-footer" style="text-align: center">
        		<!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> -->
        		<a href="#" id="closeModel" class="button button-primary button-rounded button-large btn-default" data-dismiss="modal">关闭</a>
      		</div>
    	</div>
  		</div>
	</div>	
</body>

<script type="text/javascript">
var sign;
var ex = {
	//显示当前时间
	showtime:function(){
		//获取当前时间
		var d = new Date();
		var str = d.getFullYear()+" 年 "+(d.getMonth()+1)+" 月 "+d.getDate()+" 日";
		$('#nowtime').text(str);
	},
	//选择人员时的操作
	selectperson:function(){
		$('#bf').blur();
		$('#lu').blur();
		$('#dl-lu-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-lu-span').attr("class","palette palette-midnight-blue");
		$('#dl-bf-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-bf-span').attr("class","palette palette-midnight-blue");
	},
	//清空所有数据
	clearall:function(){
		$('#bf').text("");
		$('#lu').text("");
		$('#bf').blur();
		$('#lu').blur();
		$('#dl-lu-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-lu-span').attr("class","palette palette-midnight-blue");
		$('#dl-bf-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-bf-span').attr("class","palette palette-midnight-blue");
	},
	//更新或提交后取消聚焦
	releaseall:function(){
		$('#bf').blur();
		$('#lu').blur();
		$('#dl-lu-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-lu-span').attr("class","palette palette-midnight-blue");
		$('#dl-bf-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-bf-span').attr("class","palette palette-midnight-blue");
	},
	//键入数字按钮
	enternumber:function(x){
		var bf_text = $('#bf').text();
		
		if(true==$('#bf').is(":focus")){
			if(bf_text.length<11){
				$('#bf').append(x);
			}
		}
	},
	cleardevice:function(){
		//$('#macbook').attr("class","list-group-item active");
		$('#ipad').attr("class","list-group-item");
		$('#macbook').attr("class","list-group-item");
		$('#imac').attr("class","list-group-item");
		$('#macpro').attr("class","list-group-item");
		$('#ipod').attr("class","list-group-item");
		$('#others').attr("class","list-group-item");
	}
}

$(function(){
	//显示时间
	ex.showtime();
	

	
	//设备选择功能
	$('#imac').click(function(){
		sign = 'imac';
		$('#imac').attr("class","list-group-item active");
		$('#ipad').attr("class","list-group-item");
		$('#macbook').attr("class","list-group-item");
		$('#macpro').attr("class","list-group-item");
		$('#ipod').attr("class","list-group-item");
		$('#others').attr("class","list-group-item");
	})
	$('#ipad').click(function(){
		sign = 'ipad';
		$('#imac').attr("class","list-group-item");
		$('#ipad').attr("class","list-group-item active");
		$('#macbook').attr("class","list-group-item");
		$('#macpro').attr("class","list-group-item");
		$('#ipod').attr("class","list-group-item");
		$('#others').attr("class","list-group-item");
	})
	$('#macbook').click(function(){
		sign = 'macbook';
		$('#imac').attr("class","list-group-item");
		$('#ipad').attr("class","list-group-item");
		$('#macbook').attr("class","list-group-item active");
		$('#macpro').attr("class","list-group-item");
		$('#ipod').attr("class","list-group-item");
		$('#others').attr("class","list-group-item");
	})
	$('#macpro').click(function(){
		sign = 'macpro';
		$('#imac').attr("class","list-group-item");
		$('#ipad').attr("class","list-group-item");
		$('#macbook').attr("class","list-group-item");
		$('#macpro').attr("class","list-group-item active");
		$('#ipod').attr("class","list-group-item");
		$('#others').attr("class","list-group-item");
	})
	$('#ipod').click(function(){
		sign = 'ipod';
		$('#imac').attr("class","list-group-item");
		$('#ipad').attr("class","list-group-item");
		$('#macbook').attr("class","list-group-item");
		$('#macpro').attr("class","list-group-item");
		$('#ipod').attr("class","list-group-item active");
		$('#others').attr("class","list-group-item");
	})
	$('#others').click(function(){
		sign = 'Apple 配件';
		$('#imac').attr("class","list-group-item");
		$('#ipad').attr("class","list-group-item");
		$('#macbook').attr("class","list-group-item");
		$('#macpro').attr("class","list-group-item");
		$('#ipod').attr("class","list-group-item");
		$('#others').attr("class","list-group-item active");
	})
	
	//backspace
	$('#backspace').click(function(){
		var bf_text = $('#bf').text();
		var lu_text = $('#lu').text();
		if(true==$('#bf').is(":focus") && bf_text.length>0){
				$('#bf').text("");	
		}
		if(lu_text.length>0){
				$('#lu').text("");
		}
		$('#dl-bf-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-bf-span').attr("class","palette palette-midnight-blue");
	})
	//数字按钮
	$('#one').click(function(){
		var x = "1";
		ex.enternumber(x);
	})
	$('#two').click(function(){
		var x = "2";
		ex.enternumber(x);
	})
	$('#three').click(function(){
		var x = "3";
		ex.enternumber(x);
	})		
	$('#four').click(function(){
		var x = "4";
		ex.enternumber(x);
	})
	$('#five').click(function(){
		var x = "5";
		ex.enternumber(x);
	})
	$('#six').click(function(){
		var x = "6";
		ex.enternumber(x);
	})
	$('#seven').click(function(){
		var x = "7";
		ex.enternumber(x);
	})
	$('#eight').click(function(){
		var x = "8";
		ex.enternumber(x);
	})
	$('#nine').click(function(){
		var x = "9";
		ex.enternumber(x);
	})
	$('#zero').click(function(){
		var x = "0";
		ex.enternumber(x);
	})	

	//激活当前mode
	$('#pi-bf').click(function(){		
		//将其他div的颜色还原
		$('#dl-lu-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-lu-span').attr("class","palette palette-midnight-blue");

		$('#dl-bf-dt').attr("class","palette palette-peter-river");
		$('#dl-bf-span').attr("class","palette palette-belize-hole");
		$('#bf').focus();
	})
	$('#pi-lu').click(function(){
		$('#dl-bf-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-bf-span').attr("class","palette palette-midnight-blue");

		$('#dl-lu-dt').attr("class","palette palette-peter-river");
		$('#dl-lu-span').attr("class","palette palette-belize-hole");
		$('#lu').focus();
		//清空选中的项目
		ex.cleardevice();
		//激活mode时打开模态框，禁用空白和esc关闭模态框
		$('#myModal').modal({backdrop: 'static', keyboard: false});
		
	})
	
	//打开排队信息模态框
	$('#checkNumber').click(function(){
		$('#myListModal').modal({backdrop: 'static', keyboard: false});
	})
		
	//保存设备信息
	$('#saveDevice').click(function(){
		$('#lu').text(sign);
		$('#dl-lu-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-lu-span').attr("class","palette palette-midnight-blue");
	})
	//关闭模态框
	$('#closeModel').click(function(){
		$('#dl-lu-dt').attr("class","palette palette-wet-asphalt");
		$('#dl-lu-span').attr("class","palette palette-midnight-blue");
	})

	$('#commit').click(function(){		
		var cmt_confirm = false;
		var str_bf = $('#bf').text();
		var str_lu = $('#lu').text();
		
		if(str_bf==""){
			alert("请填写您的联系方式，方便我们与您取得联系！");
			return;
		}
		if(str_lu==""){
			alert("请选择您需要诊断的设备！");
			return;
		}
		
		if(window.confirm("请确认您的信息无误，此信息会提交给维修站工作人员，谢谢合作！           是否提交？")){
			cmt_confirm = true;
			}else{
			cmt_confirm = false;
		}
		
		if(cmt_confirm==false){
			return;
		}else{
			 $.ajax ({
		            url:"/AccountBook/account",
		            type:"post",
		            data:{	            	
		           	"str_bf":str_bf,
		           	"str_lu":str_lu,
		            },
		            dataType:"text",
		            success:function(result){ //result的内容是服务器返回的数据
		           		if(result){
		           			alert("insert success!");
		           			ex.releaseall();
		           			return;
		           		}		            	
		            }
		    	});
		}	
	})

});
</script>
</html>